<template>
  <div class="page-nav">
    <el-aside width="200px">
      <el-row>
        <el-col :span="24">
          <h3 class="logo"><router-link to='/'>小U商城后台</router-link></h3>
          <!-- router:el-menu组件的属性！打开路由模式，开启后会跳转到index对应的路径 -->
          <el-menu
            router
            unique-opened
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="#262a32"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="/index">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>系统设置</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/index/menu">菜单管理</el-menu-item>
                <el-menu-item index="/index/role">角色管理</el-menu-item>
                <el-menu-item index="/index/admin">管理员管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商城管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/index/cate">商品分类</el-menu-item>
                <el-menu-item index="/index/goods">商品管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
  </div>
</template>
<style lang="">
.page-nav {
  height: 100vh;
  background-color: #262a32;
  overflow: hidden;
}
.page-nav .el-menu {
  border-right: 0;
}
.page-nav h3.logo {
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background-color: #444;
  white-space: nowrap;
  overflow: hidden;
  font-weight: normal;
  letter-spacing: 3px;
}
.page-nav .el-menu-item.is-active {
  background-color: #fb6d49 !important;
  color: #fff;
}
.page-nav .el-submenu .el-menu-item {
  padding-left: 55px !important;
}
</style>